<template>
  <div id="app">
    <SearchFor v-model="searchText"></SearchFor>
    <table class="my-table">
    <PatientTable :records="records" :searchText="searchText"></PatientTable>
    <DetailModal ref="detailModal"></DetailModal>
  </table>
  </div>
</template>

<script>
import PatientTable from './components/PatientTable.vue';
import SearchFor from './components/SearchFor.vue';
import DetailModal from './components/DetailModal.vue'
export default{
  components:{
    SearchFor,
    PatientTable,
    DetailModal
  },
  data(){
    return{
      records: [
  {
    date: '2022-01-01',
    doctor: '张三',
    diagnosis: '感冒',
    prescription: '感冒药',
  },
  {
    date: '2022-02-01',
    doctor: '李四',
    diagnosis: '头疼',
    prescription: '止疼药',
  },
  {
    date: '2022-03-01',
    doctor: '王五',
    diagnosis: '腰痛',
    prescription: '止痛贴',
  }
],
searchText:''
    }
  },
  computed:{
    filteredRecords() {
      if (this.searchText === '') return this.records;
      return this.records.filter(record => {
        return Object.values(record).some(value =>
          value.toString().toLowerCase().includes(this.searchText.toLowerCase())
        );
      });
    }
  },
  methods: {
    showDetails(record) {
      this.$refs.detailModal.openModal(record);
    }
  }
}
</script>

<style scoped>
  .my-table {
    border-collapse: collapse;
    width: 100%;
  }

  .my-table td, .my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .my-table th {
    background-color: #f2f2f2;
  }
</style>
